<template>
  <div>
    <!-- For Single and Multi-Choice Questions -->
    <div v-if="questionType === '1' || questionType === '2'">
      <div v-for="(option, index) in optionsModel" :key="index" class="option-item">
        <el-input v-model="option.optionContent" placeholder="请输入选项内容">
          <template #prepend>
            <el-radio-group v-if="questionType === '1'" v-model="correctIndex" @change="handleSingleChoiceChange(index)">
              <el-radio :label="index">设为答案</el-radio>
            </el-radio-group>
            <el-checkbox v-if="questionType === '2'" v-model="option.correctFlag">正确答案</el-checkbox>
          </template>
        </el-input>
        <el-button @click="removeOption(index)" :icon="Delete" circle plain class="ml-10"></el-button>
      </div>
      <el-button @click="addOption" :icon="Plus">增加选项</el-button>
    </div>

    <!-- For Fill-in-the-Blank Questions -->
    <div v-if="questionType === '3'">
       <div v-for="(option, index) in optionsModel" :key="index" class="option-item">
        <el-input v-model="option.optionContent" placeholder="请输入一个正确答案" />
        <el-button @click="removeOption(index)" :icon="Delete" circle plain class="ml-10"></el-button>
       </div>
       <el-button @click="addFillInAnswer" :icon="Plus">增加一个可能答案</el-button>
       <p class="form-tip">填空题可以有多个正确答案（例如，用户输入“5”或“五”都算对）。</p>
    </div>

    <!-- For Judgment Questions -->
    <div v-if="questionType === '4'">
      <el-radio-group v-model="correctIndex" @change="handleJudgmentChange">
        <el-radio :label="0">正确</el-radio>
        <el-radio :label="1">错误</el-radio>
      </el-radio-group>
      <p class="form-tip">判断题的选项已固定为“正确”和“错误”。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { Plus, Delete } from '@element-plus/icons-vue';

const props = defineProps({
  questionType: {
    type: String,
    required: true,
  },
});

const optionsModel = defineModel('options', {
  type: Array,
  required: true,
});

// For single choice, we manage the correct answer by its index
const correctIndex = ref(-1);

const findCorrectIndex = () => {
  return optionsModel.value.findIndex(opt => opt.correctFlag);
};

// Sync internal correctIndex with the model from parent
watch(optionsModel, (newVal) => {
  if (props.questionType === '1' || props.questionType === '4') {
    correctIndex.value = findCorrectIndex();
  }
}, { immediate: true, deep: true });


// When question type changes, reset the options
// --- Methods ---

const addOption = () => {
  optionsModel.value.push({
    optionContent: '',
    correctFlag: false,
    sort: optionsModel.value.length,
  });
};

const addFillInAnswer = () => {
  optionsModel.value.push({
    optionContent: '',
    correctFlag: true, // All are correct answers for fill-in
    sort: optionsModel.value.length,
  });
}

const removeOption = (index) => {
  if (optionsModel.value.length > 1) {
    optionsModel.value.splice(index, 1);
    if (props.questionType === '1' || props.questionType === '4') {
        correctIndex.value = findCorrectIndex();
    }
  }
};

// Handle single choice radio button change
const handleSingleChoiceChange = (index) => {
  optionsModel.value.forEach((opt, i) => {
    opt.correctFlag = (i === index);
  });
};

// Handle judgment radio button change
const handleJudgmentChange = (newIndex) => {
  optionsModel.value.forEach((opt, i) => {
    opt.correctFlag = (i === newIndex);
  });
};
</script>

<style scoped>
.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.ml-10 {
  margin-left: 10px;
}
.form-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}
</style>